8.1 Introduction to JavaScript

  1. Motivations
    • Try n-Puzzle Game.
    • You have learned HTML and CSS. What else do you need to write the code for the above game?

  2. Bootstrap is
    • A HTML and CSS framework that supports user interface components, such as buttons, tables, inputs, menus, tabs, modal windows
  3. HTML and CSS are
    • They are generally descriptive languages.
    • There are only a few limited ways to respond to user actions. Do you remember :hover, :active, :target, and :checked pseudo classes?
    • How to react to clicking on the game board? How to control the game board? Not even Bootstrap.
  4. What you need is
    • You need a programming language.
    • JavaScript
        • You can do the followings.
      • Read user inputs. E.g., Your name:
      • React to user activities, such as mouse move, click, keyboard, ... E.g.,
      • Control user interface components, such as menu, tabs, ...
      • Control HTML elements
      • Solve problems using programming logic. E.g., Tic-Tac-Toe and Flippy games on TRU Board Games Playground
      • ...
  5. Read all in JavaScript Introduction.
    • What can you do with JavaScript?
      • Reacting to events, such as mouse clicking
      • Read/change
        • Contents
        • Attributes
        • Styles, i.e., CSS properties
      • Programming logic to solve problems or to do something useful

  6. Learning outcomes